<template>
  <el-row class="warp">
    <el-col :span="24" class="warp-breadcrum">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }"><b>首页</b></el-breadcrumb-item>
        <el-breadcrumb-item>设置</el-breadcrumb-item>
        <el-breadcrumb-item>个人信息{{name}}</el-breadcrumb-item>
      </el-breadcrumb>
    </el-col>
    <el-col :span="24" class="warp-breadcrum">
    <el-tabs type="border-card" style="width:400px">
      <el-tab-pane label="基础信息">
        <el-form ref="form" :model="form" :rules="rules" label-width="80px">
          <el-form-item label="账号" required>
            <el-input required v-model="form.loginName" disabled></el-input>
          </el-form-item>
          <el-form-item prop="realName" label="昵称">
            <el-input v-model="form.realName"></el-input>
          </el-form-item>
          <el-form-item prop="mobile" label="手机">
            <el-input v-model="form.mobile"></el-input>
          </el-form-item>
          <el-form-item prop="email" label="邮箱" required>
            <el-input v-model="form.email"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" style="float: right" @click="handleSaveProfile">修改并保存</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <!--<el-tab-pane label="二维码信息">-->
        <!--<div style="margin-left: 50px;width: 300px;height: 300px">-->
          <!--<img  width="300px" height="300px" :src="qrCodrBase64"/>-->
        <!--</div>-->
        <!--<div style="margin-left: 70px;">-->
          <!--URL：<el-input readonly="true" v-model="qrCodeUrl" style="width:210px"></el-input>-->
        <!--</div>-->
      <!--</el-tab-pane>-->
    </el-tabs>
    </el-col>
  </el-row>
</template>

<script>
  import API from '@/api/api_user';
  import {bus} from '../../bus.js'
  import valid from '@/utils/valid.js'
  export default {
    data() {
      return {
        loading: false,
        name: '',
        form: {
          loginName: '',
          realName: '',
          mobile: '',
          email: ''
        },
        qrCodrBase64: '',
        qrCodeUrl: '',
        rules: {
          realName: [
            {required: true, message: '请输入昵称', trigger: 'blur'}
          ],
          email: [
            {type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur,change'}
          ],
          mobile: [
            {required: true, message: '请输入手机', trigger: 'blur'},
            {validator: valid.isMobile, trigger: 'blur'}
          ]
        }
      }
    },
    methods: {
      handleSaveProfile() {
        let that = this;
        that.$refs.form.validate((valid) => {
          if (valid) {
            that.loading = true;
            API.updateMeInfo(that.form).then(function (result) {
              that.loading = false;
              debugger
              if (result.code === '0000') {
                //修改成功
                that.$message.success({showClose: true, message: '修改成功', duration: 2000});
              } else {
                that.$message.error({showClose: true, message: result.message, duration: 2000});
              }
            }, function (err) {
              that.loading = false;
              that.$message.error({showClose: true, message: err.toString(), duration: 2000});
            }).catch(function (error) {
              that.loading = false;
              console.log(error);
              that.$message.error({showClose: true, message: '请求出现异常', duration: 2000});
            });
          }
        });
      }
    },
    mounted() {
      let _this = this
      API.getUserInfo().then(result => {
        if (result.code === '0000'){
          let frontUrl = process.env.FRONT_URL;
          Object.assign(_this.form, result.data)
          this.qrCodrBase64 = result.data.qrCodeUrl
          this.qrCodeUrl = frontUrl + '?userId=' +result.data.id
          console.error(result.data)
        }
      })
    },
    created(){
      let name = this.$route.query.name
      this.name = name
    }
  }
</script>
<style>
  .warp-main-user {
    border:1px solid;
    border-color: #f4f4f5;
    background-color: #ffffff;
    border-radius:15px;
    margin-top: 20px;
    padding: 20px 20px 0px 0px;
    box-shadow: 0px 5px 5px rgba(136, 83, 102, 0.13);
  }
</style>
